<template>
  <div class="h-full p-4">
    <div class="bg-white rounded-xl shadow-lg p-6 intro-y h-[calc(100vh-2rem)]">
      <!-- <h3 class="text-xl font-semibold text-gray-700 mb-6 text-center">应急装备目录结构</h3> -->
      <div class="chart-container">
        <chart3 :tableData="categoryTree" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import chart3 from "./chart3.vue";
import * as $api from "@/api/api.js";

const categoryTree = ref([]);

onMounted(() => {
  getCategoryTree();
});

const getCategoryTree = () => {
  $api.GetCategoryTree().then(res => {
    categoryTree.value = res.children;
  });
};
</script>

<style scoped>
.chart-container {
  height: 100%;
  width: 100%;
}
</style>